<template>
  <div class="home">
    <div class="header-box">
      <van-nav-bar>
        <template #left>
          <span class="icon logo"></span>
        </template>
        <template #right>
          <span class="icon service"></span>
        </template>
      </van-nav-bar>
      <div class="top_menu_box">
        <van-grid :column-num="4" :gutter="3" :border="false">
          <van-grid-item
            v-for="(item, index) in topMemu" :key="index"
            :text="item.name"
            @click="goUrl(item.link)">
            <template #icon>
              <span class="icon" :class="item.icon"></span>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="menu">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="(item, index) in menuList" :key="index"
          :text="item.name"
          @click="goHandle(item)">
          <template #icon>
            <span class="icon" :class="item.icon"></span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="notices">
      <van-notice-bar left-icon="volume-o" background="#FFF" :scrollable="false">
        <template #left-icon><span class="notices_icon"></span></template>
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>浦发硅谷银行增资获批，火力全开助力中国科技经济</van-swipe-item>
          <van-swipe-item>火力全开助力中国科技经济</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="hot_activities">
      <div class="activities_title">热门活动</div>
      <div class="activities_content">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Swipe,
  SwipeItem,
  NoticeBar,
  Grid,
  GridItem,
  Tabbar,
  TabbarItem
} from 'vant';
import { mapActions, mapState } from 'vuex';

export default {
  name: 'Home',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [NoticeBar.name]: NoticeBar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 0,
      topMemu: [
        { name: '账户查询', icon: 'accountInquiry', link: 'AccountInquiry' },
        { name: '转账汇款', icon: 'transferMoney', link: 'Transfer' },
        { name: '交易授权', icon: 'transactionAuthor', link: '' },
        { name: '银企对账', icon: 'bankEnterprise', link: '' }
      ],
      menuList: [
        {
          name: '定期存款',
          icon: 'timeDeposit',
          link: 'TimeDeposit',
          auth: true
        },
        {
          name: '定活互转',
          icon: 'fixedActivity',
          link: 'TimeDeposit',
          auth: true
        },
        // { name: '定活互转', icon: 'fixedActivity', link: 'Investment' },
        { name: '通知存款', icon: 'noticeDeposit', link: '' },
        { name: '大额存单', icon: 'largeDeposit', link: '' },
        { name: '外汇买卖', icon: 'foreignExchange', link: '' },
        { name: '结售汇', icon: 'settlementSale', link: '' },
        { name: '预约开户', icon: 'makeAppointment', link: 'ReserveAccount' },
        { name: '企业贷款', icon: 'corporateLoan', link: '' },
        { name: '外汇牌价', icon: 'exchangeRate', link: '' },
        { name: '全部', icon: 'all', link: '' }
      ],
      mune: []
    };
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.isLogin
    })
  },
  methods: {
    ...mapActions(['changeLoginState', 'changeNeedLogin', 'saveRoute']),
    goUrl(url) {
      if (!url) return;
      const route = { name: url };
      if (!this.isLogin) {
        this.changeNeedLogin(true);
        this.saveRoute(route);
      } else {
        this.$router.push(route);
      }
    },
    goHandle(item) {
      if (!item.link) return;
      const route = { name: item.link };
      if (item.auth) {
        this.changeNeedLogin(true);
        this.saveRoute(route);
      } else {
        this.$router.push(route);
      }
    }
  },
  mounted() {}
};
</script>

<style lang="less">
  .home{
    background-color: #EFEFEF;
    .header-box{
      width: 100vw;
      /*height: 30vh;*/
      height: 11.5625rem;
      background-image: url('../assets/img/home/bg@2x.png');
      background-size: 100vw 11.5625rem;
      background-repeat: no-repeat;
      .van-nav-bar{
        height: 4rem;
        background: transparent;
        .logo{
          width: 30vw;
          height: 4rem;
          background-size: 30vw 4rem;
          background-image: url('../assets/img/home/logo@2x.png');
          background-repeat: no-repeat;
        }
        .service{
          width: 1.375rem;
          height: 1.375rem;
          background-size: 1.375rem 1.375rem;
          background-image: url('../assets/img/home/service@2x.png');
          background-repeat: no-repeat;
        }
      }
      .van-grid-item{
        .van-grid-item__content--center{
          background: transparent;
        }
      }
      .top_menu_box{
        padding: 1rem 0 0.5rem 0;
        color: white;
        .van-grid-item__text{
          color: #FFF;
          font-size: 15PX;
          line-height: 18PX;
          padding-top: 8PX;
        }
        .icon {
          width: 10vw;
          height: 10vw;
          background-size: 10vw 10vw;
          display: inline-block;
          vertical-align: middle;
          background-repeat: no-repeat;
        }
        .accountInquiry{
          background-image: url('../assets/img/home/accountInquiry@2x.png');
        }
        .transferMoney{
          background-image: url('../assets/img/home/transferMoney@2x.png');
        }
        .transactionAuthor{
          background-image: url('../assets/img/home/transactionAuthor@2x.png');
        }
        .bankEnterprise {
          background-image: url('../assets/img/home/bankEnterprise@2x.png');
        }
      }
    }
    .menu {
      width: 100vw;
      height: 12rem;
      font-size: 12px;
      .icon {
        width: 2rem;
        height: 2rem;
        background-size: 2rem 2rem;
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
      }
      .timeDeposit {
        background-image: url('../assets/img/home/timeDeposit@2x.png');
      }
      .fixedActivity {
        background-image: url('../assets/img/home/fixedActivity@2x.png');
      }
      .noticeDeposit {
        background-image: url('../assets/img/home/noticeDeposit@2x.png');
      }
      .largeDeposit {
        background-image: url('../assets/img/home/largeDeposit@2x.png');
      }
      .foreignExchange {
        background-image: url('../assets/img/home/foreignExchange@2x.png');
      }
      .settlementSale {
        background-image: url('../assets/img/home/settlementSale@2x.png');
      }
      .makeAppointment {
        background-image: url('../assets/img/home/makeAppointment@2x.png');
      }
      .corporateLoan {
        background-image: url('../assets/img/home/corporateLoan@2x.png');
      }
      .exchangeRate {
        background-image: url('../assets/img/home/exchangeRate@2x.png');
      }
      .all {
        background-image: url('../assets/img/home/all@2x.png');
      }
      .van-grid-item__content{
        padding: 18PX 8PX;
      }
      .van-grid-item{
        .van-grid-item__content--center{
          /*padding: 8PX;*/
        }
        .van-grid-item__text{
          padding-top: 0.75rem;
          line-height: 1rem;
          font-size: 13/16rem;
        }
      }
    }
    .swipe-ad{
      height: 9rem;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 9rem;
        text-align: center;
        background-color: #39a9ed;
        width: 80%;
      }
    }
    .notices{
      margin-top: 0.5rem;
      /*height: 2.75rem;*/
      .notices_icon{
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        background-image: url('../assets/img/home/notices@2x.png');
        background-repeat: no-repeat;
        padding-right: 0.5rem;
      }
      .van-notice-bar {
        height: 44PX;
      }
      .notice-swipe {
        height: 40px;
        line-height: 40px;
      }
      .van-swipe-item{
        font-size: 0.815rem;
      }
    }
    .hot_activities{
      margin-top: 0.5rem;
      background-color: #fff;
      width: 100vw;
      height: 12rem;
      .activities_title{
        height: 2.5rem;
        font-size: 17/16rem;
        line-height: 2.5rem;
        padding: 0 1rem;
        font-weight: bold;
      }
      .activities_content{
        height: 9rem;
        .my-swipe .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height: 9rem;
          text-align: center;
          background-color: #39a9d8;
        }
      }
    }

  }
</style>
